<template>
  <div class="note">
    <div class="toptwo" @click="changeTab(index, $event)" >
      <div class="theme-list">
        <div class="fixed-nav" ref="fixednav">
          <div class="fixed-nav-content">
            <p
              v-for="(item, index) in productDatatwoRig"
              :key="index"
              :class="['tab-title']"
              @click="changeTab(index, $event)"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
      </div>

      <div class="themeTow">
        <div class="fix-nav" ref="fixednav">
          <div class="fixed-nav-Two">
            <p
              v-for="(item, index) in productDatathr"
              :key="'it-' + index"
              :class="['tab-title']"
              @click="changeTab(index, $event)"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="root" id="root"> 
      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/9/b/2/320_9bc17c116fea803ed3bd41f92fbb3db2.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/9/b/2/320_9bc17c116fea803ed3bd41f92fbb3db2.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/7/c/b/320_1670403350458.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/a/e/9/320_ae50f54b6f7290f227283d93ffe338a9.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/f/0/f/320_1670401799844.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/a/e/9/320_1670401847363.jpg" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/7/e/a/7e4ee9cf527b4cc7c3363a46b5942bfa.png" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

      <div class="item">
        <img class="itemImg" src="https://i1.douguo.com/upload/note/7/e/a/7e4ee9cf527b4cc7c3363a46b5942bfa.png" alt=""> 
        <div class="userInfo">
          <span class="username"> 牵起你的左手护着你 </span> </div>  
      </div>  

    </div>

    

    


    
    <!-- <div class="contennt" >
      <div class="column"> </div>
       <div class="contitem" v-for="(item,index) in productDataRig " :key="index" >
         <div class="img-box">
            <img class="auto-img" :src="item.note.image_u" alt="">
         </div>
         <div class="title">
            <h4>{{item.note.title}}</h4>
         </div>
         <div class="foot">
           <div class="author">
             <div class="autimg"> <img class="auto-img" :src="item.note.author.p" alt=""> </div>
             <div class="autname">{{item.note.author.n}} </div>
           </div>
           <div class="love">
              <div class="loveimg"> <van-icon name="like-o" 
                color="#484848" size="20px"/></div>
              <div class="num">{{item.note.like_count}} </div>
           </div>
         </div>
         
       </div>
       
    </div> -->
    
  </div>
</template>

<script>
export default {
  name: "Note",

  //接口数据生成
  data() {
    return {
      //中间的数据
      productDataRig:[],
      //头部的内容
      productDatatwoRig: [],
      productDatathr: [],

      tabIndex: 0,
      //  productDataTop:[],
    };
  },
  created() {
    this.getProductByNote();
    this.getProductByNoteRig();
    // console.log("this.axios==>" ,this.axios);
  },

  methods: {
    //参考 https://www.axios-http.cn/docs/api_intro
    //根据商品类型获取商品数据
    getProductByNote() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/notes/0/5",
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "0",
          limit: "20",
          btmid: [1393964],
        },
      })
        .then((result) => {
          console.log("result==>", result); //输出结果看一下
          // this.productData = result.data.result;
          //这里是里面的内容
          this.productData = result.data.result.list;
          //头部的内容
          this.productDatatwo = result.data.result.topics;

          let notetwo = this.productData
            .filter((item) => {
              return item.type == 1;
            })
            .map((item) => {
              return item;
            });
          this.productData = notetwo;

          //   let noteone = this.productDatatwo.filter((item) => {
          //     return item.type == 1
          //   }).map((item) => {
          //     return item
          //   });
          //   //头部内容
          //   this.productDatatwo = noteone

          // console.log("里面的内容==>", this.productData);
          // console.log("头部的数据==>", this.productDatatwo);

          //   this.productDataTop = result.data.topics;
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },

    getProductByNoteRig() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/notes/0/5",
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "10",
          limit: "60",
          btmid: [1393964],
        },
      })
        .then((result) => {
          // console.log("result==>", result); //输出结果看一下
          // this.productData = result.data.result;
          //这里是里面的内容
          this.productDataRig = result.data.result.list;
          //头部的内容
          this.productDatatwoRig = result.data.result.topics[0];
          this.productDatathr = result.data.result.topics[1];

          let notetwoRig = this.productDataRig
            .filter((item) => {
              return item.type == 1;
            })
            .map((item) => {
              return item;
            });
          this.productDataRig = notetwoRig;

          console.log("里面的内容Right==>", this.productDataRig);
          console.log("头部的数据==>", this.productDatatwoRig);
          console.log("头部的数据2==>", this.productDatathr);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
 .note{

.toptwo {
    overflow-x: scroll;
    .theme-list {
      margin-top: 12px;
      .fixed-nav {
        overflow-x: scroll;
        .fixed-nav-content {
          display: flex;
        }
      }
    }
    .themeTow {
      margin-top: 12px;
      .fix-nav {
        overflow-x: scroll;
        .fixed-nav-Two {
          display: flex;
        }
      }
    }

    .tab-title {
      color: #5398a0;
      font-size: 15px;
      font-weight: 900;
      margin: 0 3px;
      display: flex;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0 10px;
      background-color: #f3f9fa;
      border-radius: 30px 30px 30px 30px;
      flex-shrink: 0;
      margin-bottom: 5px;
    }
    //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
    ::-webkit-scrollbar {
      width: 0.01rem;
      opacity: 0;
      display: none;
    }
    //定义滚动条轨道 内阴影加圆角
    ::-webkit-scrollbar-track {
      background-color: #fff;
      opacity: 0;
    }
    //定义滑块 内阴影加圆角
  }


  #root{
    margin: 0 auto;
    width: calc(~"100% - 10px ");
    // 多少行 减一
    column-count: 2;
    //每一列的宽
    column-width: 125px;
    //列表之间的间隙
    column-gap: 5px;
    padding: 15px 5px 0 5px ;
    .item{

      margin-bottom: 6px;
      break-inside: avoid;
      background-color: #fff;
       
      .itemImg{
        width: 100%;
        vertical-align: middle;

      }
      .userInfo{
        padding: 2px 4px;
        .username{
          margin-left: 5px;
          text-shadow: 2px 2px 2px rgba(2px ,2px ,2px , .3);
        }
      }
      &:hover{
      box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);

    }
    }
    
    
    
  }

 

    //  .contennt{
    //   display: flex;
    //   flex-wrap: wrap;
    //   align-self: flex-start;
    //   padding: 4px;
    //   .contitem{
    //     height: 100%;
    //     margin-bottom: 20px;
    //     width: calc(~ "50% - 4px + 2px " );
      
    //     background-color: #ffff;
    //     // padding: 10px;
    //     margin-right: 4px; //右边共多出10像素 + 5px 一人一半
    //     // 去掉偶数个的magin-right
    //     &:nth-child(2n){
    //       margin-right: 0;
    //     }
    //     .img-box{
    //       //在App.vue全局里面定义好图片的样式
    //       // 图片的通用格式
    //       overflow: hidden;
    //       box-sizing: border-box;
    //     }
    //     .title{
    //       padding-left: 10px;
    //       color: #373737;  
    //       h4{
    //         margin-bottom: 6px;
    //       }
    //     }
    //       .foot{
            
    //         padding-left: 10px;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;
    //         .author{ 
    //           display: flex;
    //           align-items: center;
    //           justify-content: center;
    //           .autimg{
    //         width: 20px;
    //         height: 20px;
    //         border-radius: 50%;
    //         display: block;
             
    //           img{
    //         width: 20px;
    //         height: 20px;
    //         border-radius: 50%;
    //         object-fit: cover;
    //         display: block;
    //           }
    //         }
    //         .autname{
    //           color: #a3a3a3;
    //           margin-left: 8px;
    //         }
    //         }
    //         .love{              
    //           display: flex;
    //           align-items: center;
    //           justify-content: center;
              
    //           .num{
    //             color: #a3a3a3;
    //             margin-left: 6px;
    //           }
    //         }
    //       }
      
    //   } 
    //  }
    //  .contennt::after{
    //    content: "";
    //    flex-grow: 9999999;
    //    min-width:  calc(~ "50% - 4px + 2px " );
    //    height: 0;
    //  }
    }
  </style>
